<template>
  <div class="common-layout__search">
    <div class="search-condition">
      <el-radio-group v-model="searchCondition.type" size="small">
        <el-radio-button :label="1">视频</el-radio-button>
        <el-radio-button :label="2">用户</el-radio-button>
      </el-radio-group>
      <div class="transition" v-show="searchCondition.type == 1">
        <el-radio-group v-model="searchCondition.sort" size="small">
          <el-radio-button :label="1">最多点击</el-radio-button>
          <el-radio-button :label="2">最新发布</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="searchCondition.time" size="small">
          <el-radio-button :label="1">全部时长</el-radio-button>
          <el-radio-button :label="2">10分钟以下</el-radio-button>
          <el-radio-button :label="3">10-30分钟</el-radio-button>
          <el-radio-button :label="4">30-60分钟</el-radio-button>
          <el-radio-button :label="5">60分钟以上</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="searchCondition.channel" size="small">
          <el-radio-button :label="1">全部分区</el-radio-button>
          <el-radio-button
              v-for="(channel, key) in store.channelList"
              :key="key"
              :label="Number(key)"
          >{{ channel.content }}
          </el-radio-button
          >
        </el-radio-group>
      </div>
    </div>
    <div class="content">
      <div class="video-grid" v-if="searchCondition.type === 1">
        <div v-for="video in content.video" :key="video.id">
          <VideoCard1 :video-info="video"></VideoCard1>
        </div>
      </div>
      <div v-else class="user-list">
        <div v-for="user in content.user">
          <AvatarBackImg size="60px" avatar="ffd1924d1d38453085ae75af7ab6b013.png"></AvatarBackImg>
          <div>
            <h5>{{ user.name }}</h5>
            <el-button
                @click="followUploader(user)"
                :type="!user.isFollow ? 'primary' : ''"
            >
              {{ user.isFollow ? "已关注" : "+ 关注" }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onUnmounted, WatchCallback } from "vue";
import { useRoute } from "vue-router";
import useStore from "@/store/store";
import VideoCard1 from "@/components/VideoCard1.vue";
import { Video } from "@/types/video";
import { User } from "@/types/user";
import searchApi from "@/api/search";
import { Search } from "@/api/search";
import { errorNotify, loading, successNotify } from "@/utils/common";
import AvatarBackImg from '@/components/AvatarBackImg.vue'
import followApi from "@/api/follow";

const store = useStore();
const route = useRoute();
const searchCondition = ref<Search>({
  content: "",
  type: 1,
  sort: 1,
  time: 1,
  channel: 1
});
const content = ref(<{ video: Video[]; user: User[] }>{
  video: [],
  user: []
});

const searchVideo = async () => {
  if (searchCondition.value.content.trim().length == 0) {
    errorNotify("请输入搜索内容");
    return;
  }
  const load = loading();
  const {code, data} = await searchApi.search(searchCondition.value);
  load.close();
  if (code === 0) {
    if (searchCondition.value.type == 1) {
      content.value.video = data;
    } else {
      content.value.user = data;
    }
  }
};

const followUploader = (uploader: User) => {
  followApi.follow(uploader.id, !uploader.isFollow).then(res => {
    if (res.data.code === 0) {
      uploader.isFollow = !uploader.isFollow;
      if (uploader.isFollow)
        successNotify("关注成功");
    }
  })
}

let watchCondition: any;

const watchRoute = watch(
  () => route.params.content,
  (val) => {
    searchCondition.value.content = val.toString();
    document.title = val.toString();
    watchCondition = watch(
      () => searchCondition.value,
      (val) => {
        searchVideo();
      },
      {immediate: true, deep: true}
    );
  },
  {immediate: true}
);
onUnmounted(() => {
  watchRoute();
  watchCondition();
});
</script>

<style lang="scss" scoped>
.common-layout__search {
  padding: 30px;

  .search-condition {
    display: flex;
    flex-direction: column;

    & > .transition {
      display: flex;
      flex-direction: column;
    }

    & > *,
    & > .transition > * {
      margin-top: 5px;
    }
  }

  .content {
    margin-top: 20px;

    .video-grid {
      display: grid;
      grid-template-columns: repeat(6, auto);
    }
  }

  .user-list {
    display: grid;
    grid-template-columns: repeat(2, auto);

    & > div {
      height: 100px;
      display: flex;

      & > *:first-child {
        margin-right: 20px;
      }

      h5 {
        font-size: 18px;
      }
    }
  }
}
</style>
